<template>
  <div class="app-container">
    <basic-table
      :table-title="tableTitle"
      :data-source="dataSource"
      :data-params="dataParams"
      :button-group="buttonGroup"
      :multiple-table="false"
      :search-form="searchForm"
      :reload="reload"
      @closeReload="closeReload"
    >
      <template v-slot:group="scope">
        <router-link :to="{ path: '/imGroup/members', query: { groupId: scope.row.GroupId }}">
          {{ scope.row.GroupName }}
        </router-link>
      </template>
    </basic-table>
    <el-dialog
      v-if="dialogFormVisible"
      :title="operationType === 'add'? '添加群组' : '编辑群组'"
      :visible.sync="dialogFormVisible"
      top="3%"
      @close="cancel"
    >
      <div class="el-dialog-div">
        <data-form
          v-if="dialogFormVisible"
          :loading="loading"
          :edit-data="editData"
          :operation-type="operationType"
          @createDataEmit="createDataEmit"
          @dialogFormVisibleEmit="dialogFormVisibleEmit"
        />
      </div>
    </el-dialog>

  </div>
</template>
<script>
import DataForm from './components/dataForm.vue'
import BasicTable from '@/components/BasicTable/index.vue'

import { AddGroup, GetGroupPageAll, UpdateGroup } from '@/api/Group.js'
import { TipsBox } from '@/utils/feedback.js'

export default {
  name: 'ImGroup',
  components: { BasicTable, DataForm },
  data() {
    return {
      dialogGroupMember: false,
      dialogFormVisible: false,
      loading: false,
      reload: false,
      dataSource: () => GetGroupPageAll,
      dataParams: {},
      groupMemberParams: {
        groupId: ''
      },
      tableTitle: [
        {
          label: '群ID',
          value: 'GroupId',
          show: true
        },
        {
          label: '群组名称',
          value: 'GroupName',
          show: true
        },
        {
          label: '群组类型',
          value: 'GroupType',
          show: true,
          transfer: {
            Private: '好友工作群',
            Public: '陌生人社交群(私有群)',
            ChatRoom: '会议群',
            AVChatRoom: '直播群',
            Community: '社群'
          }
        },
        {
          label: '所属公司',
          value: 'CompanyName',
          show: true
        },
        {
          label: '群状态',
          value: 'IsDestroy',
          show: true,
          transfer: ['解散', '正常'],
          width: '80'
        },
        {
          label: '创建人',
          value: 'CreateBy',
          show: true,
          width: '150'
        },
        {
          label: '所有人',
          value: 'UserName',
          show: true,
          width: '150'
        },
        {
          label: '创建时间',
          value: 'CreateOn',
          show: true,
          width: '200'
        },
        {
          label: '操作',
          show: true,
          type: 'options',
          width: '290',
          options: [
            {
              text: '编辑',
              icon: 'el-icon-edit',
              type: 'success',
              callback: row => {
                this.dialogFormVisible = true
                this.operationType = 'edit'
                this.editData = row
              }
            },
            {
              text: '成员',
              icon: 'el-icon-user',
              type: 'primary',
              callback: row => {
                this.$router.push({
                  name: 'ImGroupMembers',
                  query: { groupId: row.GroupId, groupName: row.GroupName }
                })
              }
            },
            {
              text: '聊天记录',
              icon: 'el-icon-chat-dot-square',
              type: 'info',
              callback: row => {
                this.$router.push({
                  name: 'ImGroupRecords',
                  query: { groupId: row.GroupId, groupName: row.GroupName }
                })
              }
            }
          ]
        }
      ],
      editData: {},
      operationType: 'add',
      buttonGroup: {
        expend: true,
        show: true,
        title: '表格筛选',
        size: 'small',
        fields: [
          {
            showButtonGroup: true,
            text: '添加',
            icon: 'el-icon-check',
            operateType: 'add',
            callback: e => {
              this.dialogFormVisible = true
              this.operationType = e
            }
          }
        ]
      },
      searchForm: {
        expend: true,
        title: '表格筛选',
        size: 'small',
        fields: [
          {
            show: true,
            type: 'input',
            label: '群名称',
            labelShow: false,
            name: 'groupName'
          },
          {
            show: true,
            type: 'input',
            label: '公司',
            labelShow: false,
            name: 'companyName'
          },
          {
            show: true,
            type: 'select',
            label: '群状态',
            labelShow: false,
            name: 'isDestroy',
            options: [
              {
                label: '正常',
                value: 1
              },
              {
                label: '解散',
                value: 0
              }
            ]
          },
          {
            show: true,
            type: 'input',
            label: '创建人',
            labelShow: false,
            name: 'createBy'
          },
          {
            show: true,
            type: 'datePicker',
            label: '创建时间',
            labelShow: false,
            name: ['createOn', 'tcreateOn'],
            isRange: true
          }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    cancelGroupMemberDialog() {
      this.dialogGroupMember = false
    },
    closeReload(val) {
      this.reload = val
    },
    cancel() {
      this.dialogFormVisible = false
    },
    dialogFormVisibleEmit(v) {
      this.dialogFormVisible = v
    },
    getFormData(obj) {
      const formData = new FormData()
      Object.keys(obj).forEach(key => {
        const value = obj[key]
        if (Array.isArray(value)) {
          value.forEach((subValue, i) => {
            formData.append(key + `[${i}]`, subValue)
          })
        } else {
          formData.append(key, obj[key])
        }
      })
      return formData
    },
    operateEmit2() {
      this.dialogFormVisible = true
      this.operationType = 'add'
    },
    // add
    createDataEmit(v) {
      let operate = null
      if (this.operationType === 'add') {
        operate = AddGroup
      } else if (this.operationType === 'edit') {
        operate = UpdateGroup
      }

      if (!operate) {
        return
      }

      this.loading = true
      operate(this.getFormData(v)).then((res) => {
        this.loading = false
        let type = 'error'
        if (res.statusCode === 200) {
          this.dialogFormVisible = false
          type = 'success'

          //  重载
          this.reload = true
        }
        TipsBox(type, res.message)
      }).catch(err => {
        console.log('error', err)
        this.loading = false
      })
    }
  }
}
</script>
